<template>
	<view class="main column_c">

		<u-navbar title="教患视频" placeholder="true" @rightClick="rightClick" :autoBack="true" :leftIconSize="0"></u-navbar>
		<view style="width: 100%;padding: 30rpx;margin-bottom: -10rpx;">
			<u-search placeholder="搜索门店" @custom="onSearch" @search="onSearch" v-model="keyword" />
		</view>

		<view style="margin-top: 0rpx;width: 100%;">

			<u-tabs @change="onTabChange" :list="VideoTyoeListListData.map(tab => ({ name: tab.name }))" v-model="activeTab" :lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					        color: '#ffffff',
							width:'150rpx',
							height:'60rpx',
							background:'#1FA194',
							borderRadius:'40rpx',
					        fontWeight: 'bold',
					        display: 'flex',
					        alignItems: 'center',
					        justifyContent: 'center',
					       
					    }" :inactiveStyle="{
					       color: '#303133',
					       width:'150rpx',
					       height:'60rpx',
					       background:'#F3F3F3',
						   display: 'flex',
						   alignItems: 'center',
						   justifyContent: 'center',
					       borderRadius:'40rpx',
					    }">
			</u-tabs>
		</view>



		<view class="column-wrap ">
			<z-paging ref="paging" v-model="VideoListData" @query="queryList" usePageScroll>
				<view class="col-item" v-for="(video, index) in VideoListData" :key="index">
					<video class="yyjl" :src="video.link"></video>
					<view class="wzz">{{ video.name }}</view>
				</view>
			</z-paging>
		</view>



	</view>
</template>

<script>
	import api_video from '@/api/video.js';
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
	export default {
		data() {
			return {
				keyword: null,
				VideoTyoeListListData: [], //获取分类列表
				VideoListData: [], //获取列表
				lineBg: 0,
				activeTab: 0,
				type: 666, //选中分类id-666为全部
			};
		},
		async onShow() {
			this.getVideoTyoeListListFuc(); //获取分类列表
			// this.getgetVideoListFuc(); //获取列表
		},
		mixins: [ZPMixin],
		methods: {

			onTabChange(item) {
				const selectedTab = this.VideoTyoeListListData[item.index];
				this.type = selectedTab.id;
				// this.getgetVideoListFuc();
				this.$refs.paging.reload();
				console.log("当前选中的 tab id:", this.type);
			},

			//获取列表
			// async getgetVideoListFuc() {
			// 	var per = {
			// 		no_page: 1,
			// 		page_size: 10,
			// 	}
			// 	if (this.type != 666) {
			// 		per.type = this.type
			// 	}
			// 	const res = await api_video.getVideoList(per);
			// 	if (res.code == 1) {
			// 		this.VideoListData = res.data.list
			// 	} else {
			// 		this.$util.msg(res.message);
			// 		return;
			// 	}
			// },




			async queryList(pageNo, pageSize) {

				const per = {
					no_page: pageNo,
					page_size: pageSize,

				}

				if (this.keyword) {
					per.keyword = this.keyword
				}
				if (this.type != 666) {
					per.type = this.type
				}



				const res = await api_video.getVideoList(per);
				if (res.code == 1) {
					this.$refs.paging.complete(res.data.list);
				} else {
					this.$refs.paging.complete(false);
				}

			},





			onSearch(value) {
				this.$refs.paging.reload();
			},


			//获取分类列表
			async getVideoTyoeListListFuc() {
				var per = {
					client: 2
				};
				const res = await api_video.getVideoTyoeListList(per);
				if (res.code == 1) {
					this.VideoTyoeListListData = res.data.list
					this.VideoTyoeListListData.unshift({ id: 666, name: '全部' });
				} else {
					this.$util.msg(res.message);
					return;
				}
			},


			toUrl(url) {
				this.navTo(url);
			},
		}
	};
</script>

<style scoped>
	.main {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}

	.top {
		padding: 32rpx;
	}

	::v-deep .u-tabs__wrapper__nav__item {
		padding: 18rpx !important;
	}


	.yyjl {
		height: 160rpx;
		width: 330rpx;

	}

	.wzz {
		font-weight: 400;
		font-size: 28rpx;
		color: #3D3D3D;
		margin-top: 16rpx;
	}

	.itema {
		margin-bottom: 25rpx;
	}

	.row-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.column-wrap {
		width: 100%;
		overflow: hidden;
		/* 清除浮动影响 */
		margin-left: 45rpx;
		margin-top: 30rpx;
	}

	.col-item {
		float: left;
		width: 48%;
		/* 每个 item 占据 48%，留 2% 的间隔 */
		margin-right: 2%;
		/* 右边间隔 */
		margin-bottom: 10px;
		/* 下方间隔，防止重叠 */
		box-sizing: border-box;
		margin-bottom: 30rpx;
	}

	.col-item:nth-child(2n) {
		margin-right: 0;
		/* 保证每行最后一项没有多余的间隔 */
	}
</style>